import React, {forwardRef, useEffect, useState} from 'react'
import {Form, Input, Select} from "antd";
const { Option } = Select

const UserForm = forwardRef((props, ref) =>{
    const [isDisabled, setIsDisabled] = useState(false)
    const {roleId,region,username} = JSON.parse(localStorage.getItem("token"))
    const roleObj = {
        "1": "superAdmin",
        "2": "admin",
        "3": "editor"
    }
    const checkRegionDisabled = (item)=>{
        if(props.isUpdate){
            return roleObj[roleId] !== "superAdmin";
        }else{
            if(roleObj[roleId]==="superAdmin"){
                return false
            }else{
                return item.value!==region
            }
        }
    }
    const checkRoleDisabled = (item)=>{
        if(props.isUpdate){
            return roleObj[roleId] !== "superAdmin";
        }else{
            if(roleObj[roleId]==="superAdmin"){
                return false
            }else{
                return roleObj[item.id]!=="editor"
            }
        }
    }
    useEffect(()=>{
        setIsDisabled(props.isUpdateDisabled)
    },[props.isUpdateDisabled])
    return (
        <Form
            // form={form}
            ref = {ref}
            layout="vertical"
            // name="form_in_modal"
            // initialValues={{ modifier: 'public' }}
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"
                rules={isDisabled?[]:[{ required: true, message: '请选择区域!' }]}
            >
                <Select disabled={isDisabled}>
                    {
                        props.regionList.map(item=>
                            <Option value={item.value} key={item.id}
                                    disabled={checkRegionDisabled(item)}>{item.title}</Option>
                        )
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="roleId"
                label="角色名称"
                rules={[{ required: true, message: '请选择角色!' }]}
            >
                <Select onChange={(value) => {
                    console.log(value)
                    if (value === "1") {
                        setIsDisabled(true)
                        ref.current.setFieldsValue({
                            region:""
                        })
                    } else {
                        setIsDisabled(false)
                    }
                }}>
                    {
                        props.roleList.map(item =>
                            <Option value={item.id} key={item.id} disabled={checkRoleDisabled(item)}>{item.roleName}</Option>
                        )
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})
export default UserForm